<template>
  <div class="container">
    <Item v-for=" item of music" :key="item.id" :data="item" @click.native="handleClick(item.id)"></Item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      music:[]
    }
  },
  mounted(){
    this.$http(`http://47.108.197.28:3000/top/playlist`).then(res=>{
      this.music = res.data.playlists
    })
  },
  methods:{
    handleClick(val){
      var id = val
      this.$router.push(`/MusicDetail/${id}`)
    }
  }
}
</script>

<style>
  .container{
    width: 80%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
</style>